<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>laydateTab使用例子</title>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<style type="text/css">
			.show-code {
				text-align: center;
				padding: 5px;
				cursor: pointer;
			}
			.show-code:hover {
				color: #1E9FFF;
			}
			.layui-row>div{
				padding: 5px;
				box-sizing: border-box;
			}
			.layui-row{
				background-color: #f7f7f7;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body style="padding: 10px;">
		<div >
		  <div class="layui-row">
		    <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>只使用elem参数</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate1"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate',
});
					</pre>
				</div>
		    </div>
		    <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>初始化值</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate2"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate2',
    value : '2020-10-15'
});
					</pre>
				</div>
		    </div>
		    <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>多个初始化值</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate3"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate3',
    value : ['2020', '2020-10', '2020-10-15']
});
					</pre>
				</div>
		    </div>
		  </div> 
		  <div class="layui-row">
		    <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>显示年、月类型选项卡[快捷入参]</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate4"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
	  elem : '#indate4',
	  type : 'ym'
});
					</pre>
				</div>
		    </div>
		    <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>显示年、月类型选项卡[普通入参]</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate5"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate5',
    type : ['year', 'month']
});
					</pre>
				</div>
		    </div>
			<div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>显示日期、时间、日期时间类型选项卡[普通入参]</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate6"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate6',
    type : ['date', 'time', 'datetime']
});
					</pre>
				</div>
		    </div>
		  </div>
		  <div class="layui-row">
			  <div class="layui-col-md4">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					  <legend>显示全部类型选项卡[快捷入参]</legend>
					</fieldset>
					<div>
						<input class="layui-input" readonly="readonly" id="indate7"/>
					</div>
					<div class="code-div">
						<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
						<pre class="layui-code">
laydateTab.render({
    elem : '#indate7',
    type : 'all'
});
						</pre>
					</div>
				</div>
				<div class="layui-col-md4">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					  <legend>显示全部类型选项卡[普通入参]</legend>
					</fieldset>
					<div>
						<input class="layui-input" readonly="readonly" id="indate8"/>
					</div>
					<div class="code-div">
						<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
						<pre class="layui-code">
laydateTab.render({
    elem : '#indate8',
    type : ['year', 'month', 'date', 'time', 'datetime']
});
						</pre>
					</div>
				</div>
				<div class="layui-col-md4">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					  <legend>显示日期、月、年类型选项卡[普通入参]</legend>
					</fieldset>
					<div>
						<input class="layui-input" readonly="readonly" id="indate9"/>
					</div>
					<div class="code-div">
						<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
						<pre class="layui-code">
laydateTab.render({
    elem : '#indate9',
    type : ['date', 'month', 'year']
});
						</pre>
					</div>
				</div>
		  </div>
		  <div class="layui-row">
			  <div class="layui-col-md4">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					  <legend>定制标题</legend>
					</fieldset>
					<div>
						<input class="layui-input" readonly="readonly" id="indate10"/>
					</div>
					<div class="code-div">
						<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
						<pre class="layui-code">
laydateTab.render({
    elem : '#indate10',
    type : 'all',
    title : ['年份', '月份', '日期', '时间', '日期+时间']
});
						</pre>
					</div>
				</div>
				<div class="layui-col-md4">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					  <legend>全部选项卡范围选择</legend>
					</fieldset>
					<div>
						<input class="layui-input" readonly="readonly" id="indate11"/>
					</div>
					<div class="code-div">
						<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
						<pre class="layui-code">
laydateTab.render({
    elem : '#indate11',
    type : ['year', 'month', 'date'],
    range : '~'
});
						</pre>
					</div>
				</div>
				<div class="layui-col-md4">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					  <legend>只有选项卡日期才范围选择</legend>
					</fieldset>
					<div>
						<input class="layui-input" readonly="readonly" id="indate12"/>
					</div>
					<div class="code-div">
						<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
						<pre class="layui-code">
laydateTab.render({
    elem : '#indate12',
    type : ['year', 'month', 'date'],
    range : [null, null, '~']
});
						</pre>
					</div>
				</div>
		  </div>
		  <div class="layui-row">
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>初始化默认选择【日期】选项卡</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate13"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate13',
    type : ['year', 'month', 'date'],
    selected : 'date'
});
					</pre>
			  </div>
			</div>
			<div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>内置墨绿色主题使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate14"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate14',
    type : ['year', 'month', 'date'],
    theme : 'molv'
});
					</pre>
				</div>
			</div>
			<div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>自定义主题使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate15"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate15',
    type : ['year', 'month', 'date'],
    theme : '#393D49'
});
					</pre>
				</div>
			</div>
		  </div>
		  <div class="layui-row">
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>渲染成功之后回调使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate16"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate16',
    success : function(tabElem, options) {
        console.log(tabElem);
        console.log(options);
    }
});
					</pre>
				</div>
			  </div>
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>切换选项卡回调使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate17"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate17',
    type : 'all',
    changeTab : function(type, title) {
        console.log(type);
        console.log(title);
    }
});
					</pre>
				</div>
			  </div> 
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>选择完毕的回调使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate18"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate18',
    type : ['year', 'month', 'date'],
    range : [null, null, '~'],
    done : function(value, date, endDate) {
        console.log(value);
        console.log(date);
        console.log(date);
    }
});
					</pre>
				</div>
			  </div>
		  </div>
		  <div class="layui-row">
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>销毁选项卡之后的回调使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate19"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate19',
    end : function(elem) {
        console.log(elem);
    }
});
					</pre>
				</div>
			  </div>
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>format-统一自定义格式使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate20"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate20',
    format : 'yyyy年M月d日'
});
					</pre>
				</div>
			  </div>
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>format-各自自定义格式使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate21"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate21',
    format : ['yyyy年', 'yyyy-MM', 'yyyy/MM/dd']
});
					</pre>
				</div>
			  </div>
		  </div>
		  <div class="layui-row">
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>最大最小值限制统一使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate22"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate22',
    type : 'all',
    min : '2020-1-1 08:00:00',
    max : '2020-12-31 23:59:59'
});
					</pre>
				</div>
			  </div>
			 <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>最大最小值限制区分类型使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate23"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate23',
    type : 'all',
    min : ['2020-1-1', '2020-1-1', '2020-1-1', '00:00:00', '2020-12-1 08:00:00'],
    max : ['2021-12-31', '2020-6-30', '2020-12-31', '12:00:00', '2020-12-31 23:59:59']
});
					</pre>
				</div>
			  </div>
		  </div>
		  <div class="layui-row">
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>btns-按钮全部类型统一自定义使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate25"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate25',
    btns : ['clear', 'confirm']
});
					</pre>
				</div>
			  </div> 
			  <div class="layui-col-md4">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend>btns-按钮类型区分自定义使用</legend>
				</fieldset>
				<div>
					<input class="layui-input" readonly="readonly" id="indate26"/>
				</div>
				<div class="code-div">
					<div class="show-code"><i class="layui-icon layui-icon-down"></i> <span>显示代码</span<></div>
					<pre class="layui-code">
laydateTab.render({
    elem : '#indate26',
    btns : [['clear', 'confirm'], null, null]
});
					</pre>
				</div>
			  </div> 
		  </div>
		</div>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			layui.config({
				base: 'js/layui/extends/'
			}).extend({ 
				laydateTab: 'laydateTab' 
			}).use(['jquery', 'laydateTab', 'code', 'layer'], function(){
				var $ = layui.$,
				layer = layui.layer,
				laydateTab = layui.laydateTab;
				layui.code({
				  title: 'laydateTab-代码演示'
				  // ,skin: 'notepad' //如果要默认风格，不用设定该key。
				});
				$('.layui-col-md4 .layui-code').hide();
				// 只使用elem参数
				laydateTab.render({
					elem : '#indate1'
				});
				// 初始化值
				laydateTab.render({
					elem : '#indate2',
					value : '2020-10-15'
				});
				// 多个初始化值
				laydateTab.render({
				    elem : '#indate3',
				    value : ['2020', '2020-10', '2020-10-15']
				});
				
				// 显示年、月类型选项卡[快捷入参]
				laydateTab.render({
				    elem : '#indate4',
				    type : 'ym'
				});
				// 显示年、月类型选项卡[普通入参]
				laydateTab.render({
				    elem : '#indate5',
				    type : ['year', 'month']
				});
				// 显示日期、时间、日期时间类型选项卡[普通入参]
				laydateTab.render({
				    elem : '#indate6',
				    type : ['date', 'time', 'datetime']
				});
				// 显示全部类型选项卡[快捷入参]
				laydateTab.render({
				    elem : '#indate7',
				    type : 'all'
				});
				// 显示全部类型选项卡[普通入参]
				laydateTab.render({
				    elem : '#indate8',
				    type : ['year', 'month', 'date', 'time', 'datetime']
				});
				// 显示日期、月、年类型选项卡[普通入参]
				laydateTab.render({
				    elem : '#indate9',
				    type : ['date', 'month', 'year']
				});
				// 定制标题 
				laydateTab.render({
				    elem : '#indate10',
				    type : 'all',
				    title : ['年份', '月份', '日期', '时间', '日期+时间']
				});
				//全部选项卡范围选择
				laydateTab.render({
				    elem : '#indate11',
				    type : ['year', 'month', 'date'],
				    range : '~'
				});
				//只有选项卡日期才范围选择
				laydateTab.render({
				    elem : '#indate12',
				    type : ['year', 'month', 'date'],
				    range : [null, null, '~']
				});
				// 初始化默认选择【日期】选项卡
				laydateTab.render({
				    elem : '#indate13',
				    type : ['year', 'month', 'date'],
				    selected : 'date'
				});
				// 内置墨绿色主题使用
				laydateTab.render({
				    elem : '#indate14',
				    type : ['year', 'month', 'date'],
				    theme : 'molv'
				});
				// 自定义主题使用
				laydateTab.render({
				    elem : '#indate15',
				    type : ['year', 'month', 'date'],
				    theme : '#393D49'
				});
				// 渲染成功之后回调使用
				laydateTab.render({
				    elem : '#indate16',
				    success : function(tabElem, options) {
				        console.log(tabElem);
				        console.log(options);
						layer.msg('渲染成功之后回调参数为:<br>' + JSON.stringify(options));
				    }
				});
				// 切换选项卡回调使用
				laydateTab.render({
				    elem : '#indate17',
					type : 'all',
				    changeTab : function(type, title) {
						console.log(type);
						console.log(title);
				        layer.msg('当前选择的类型为:<br>' + title + '-' + type);
				    }
				});
				// 选择完毕的回调使用
				laydateTab.render({
				    elem : '#indate18',
					type : ['year', 'month', 'date'],
					range : [null, null, '~'],
				    done : function(value, date, endDate) {
						console.log(value);
						console.log(date);
						console.log(date);
				        layer.msg('当前选择的值为:<br> ' + value);
				    }
				});
				// 销毁选项卡之后的回调使用
				laydateTab.render({
				    elem : '#indate19',
				    end : function(elem) {
				        console.log(elem);
						layer.msg('当前laydateTab销毁');
				    }
				});
				// format-统一自定义格式使用
				laydateTab.render({
				    elem : '#indate20',
				    format : 'yyyy年M月d日'
				});
				// format-各自自定义格式使用
				laydateTab.render({
				    elem : '#indate21',
				    format : ['yyyy年', 'yyyy-MM', 'yyyy/MM/dd']
				});
				// 最大最小值限制统一使用
				laydateTab.render({
				    elem : '#indate22',
					type : 'all',
				    min : '2020-1-1 08:00:00',
					max : '2020-12-31 23:59:59'
				});
				// 最大最小值限制区分类型使用
				laydateTab.render({
				    elem : '#indate23',
				    type : 'all',
				    min : ['2020-1-1', '2020-1-1', '2020-1-1', '00:00:00', '2020-12-1 08:00:00'],
				    max : ['2021-12-31', '2020-6-30', '2020-12-31', '12:00:00', '2020-12-31 23:59:59']
				});
				// btns-按钮全部类型统一自定义使用
				laydateTab.render({
				    elem : '#indate25',
				    btns : ['clear', 'confirm']
				});
				// btns-按钮类型区分自定义使用
				laydateTab.render({
				    elem : '#indate26',
				    btns : [['clear', 'confirm'], null, null]
				});
				
				// 页面事件，不用理会
				$('.show-code').on('click', function(e){
					var toggleStr = ['layui-icon-up', 'layui-icon-down','显示代码'];
					var $iconChild = $(this).children('.layui-icon');
					if ($iconChild.hasClass('layui-icon-down') ) {
						toggleStr = ['layui-icon-down', 'layui-icon-up', '隐藏代码'];
					}
					$iconChild.removeClass(toggleStr[0]);
					$iconChild.addClass(toggleStr[1]);
					$(this).children('span').html('隐藏代码');
					$(this).siblings('pre').toggle();
				});
			});
		</script>
	</body>
</html>
